<template>
	<view>
		<view class="fixed-br" v-if="showTop" @click="toTop">
			<view id='top'>
				<image src="../../static/images/top.png" mode=""></image>
			</view>
		</view>

		<view class="header-comp">
			<view class="header">
				<view class="header-bar" :style="`background:rgba(255, 255, 255, ${opacity});`">
					<view class="fill-height el-flex">
						<view class="header-btn2">
							<image :src="`../../static/images/${leftImg}.png`" mode="" @click="Back()"></image>
						</view>
						<view class="placeholder">
							<template v-if="scrollTop>100">
								<block v-for="(item,index) in goodTabList" :key="index">
									<text :class="goodTabIndex==index?'active':''" @click="changeGoodTab(index)">
										{{item.name}}
									</text>
								</block>
							</template>
						</view>
						<view class="header-btn2 share-btn">
							<image :src="`../../static/images/${rightImg}.png`" mode=""></image>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="home-page">
			<template v-if="Object.keys(product_info).length==0">
				<view class="load">
					<u-loading-page :loading="true"></u-loading-page>
				</view>
			</template>
			<template v-else>
				<u-swiper :list="swiperList" @change="changeSwiperItem" @click="clickSwiperItem" circular
					interval='5000'>
					<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
					</view>

				</u-swiper>
				<view class="goods-info">
					<view class="goods-price el-flex">
						<view class="price cur-price">
							<sup class="cur-fu ">¥</sup>

							{{dataInfo.price}}
						</view>
						<view class="price origin-price">
							<text class="origin-fu">¥</text>{{dataInfo.market_price}}
						</view>
					</view>

					<view class="coupon-cc">
						<view class="coupon-active el-flex">
							<view class="overview-promotion-left">
								预计得210米金
							</view>
							<view class="coupon-btn">
								查看
							</view>
						</view>
					</view>
					<hr>
					<view class="overview overview-goods-name">
						{{product_info.name}}
					</view>
					<view class=" overview-goods-brief" v-if="dataInfo.product_desc_ext">
						<text>{{dataInfo.product_desc_ext}}</text>
					</view>
					<view class="section section-detail">
						<view class="product_info_product_desc">
							<view class="overview overview-sell-point">
								<view class="sell_point_desc  el-flex"
									v-for="(desc,descIndex) in product_info.sell_point_desc" :key="descIndex">
									<image class="number" :src="`../../static/images/num${descIndex+1}.png`"
										mode="widthFix">
									</image>
									<text class="text-ellipsis">{{desc}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="section section-detail">
						<view class="overview overview-flow-distribution el-flex text-ellipsis">
							<text>{{product_info.name}}购机优选福利</text>
							<text> ></text>
						</view>
					</view>
					<hr>
				</view>
				<template v-if="parameterList&&parameterList.length!=0">
					<view class="section section-detail">
						<view class="product_info_class_parameters">
							<u-scroll-list>

								<view v-for="(item, index) in parameterList" :key="index"
									@click="isShowPopPlus=!isShowPopPlus">
									<template v-if="item.icon">
										<view class="good-info-item">
											<image class="icon-img" :src="item.icon" mode=""></image>

											<view class="item-name">
												{{item.top_title}}
											</view>
											<view class="info-item text-ellipsis">
												{{item.bottom_title}}
											</view>
										</view>
									</template>
								</view>
							</u-scroll-list>
						</view>
					</view>
				</template>

				<view class="section section-detail" @click="isShow=!isShow;isCart=true">
					<view class="product_info_choose_version el-flex">
						<view class="choose_version_left el-flex">
							已选
						</view>
						<view class="choose_version-right el-flex">
							<view class="">
								<view class="version el-flex">
									<text class="version-name text-ellipsis">
										<text>{{dataInfo.name}}</text>
									</text>
									<text class="version-num"> x {{goodNumber}}</text>
								</view>
								<view class="version el-flex now-wrap" v-for="(version,versionIndex) in versionList"
									:key="versionIndex">
									<text class="version-name text-ellipsis">
										<text>{{version.service_short_name}}</text>
									</text>
								</view>
							</view>
							<view class="">
								>
							</view>
						</view>
					</view>
				</view>
				<hr>
				<view class="section section-detail">
					<view class="product-section el-flex" @click="isShowPopAddress=true">
						<view class="product_left">
							送至
						</view>
						<view class="product-right ">
							<view class="version">
								<view class="location el-flex">
									<view class="el-flex">
										<image src="../../static/images/location.png" mode=""></image>
										<text class="location-name">
											{{localData.addressInfo}}
										</text>
										<text class="text-act"> 有现货</text>
									</view>
									<view>
										>
									</view>
								</view>
								<view class="location-info">
									{{textDesc}}
								</view>
							</view>

						</view>
					</view>
					<template
						v-if="dataInfo.service_refound_policy_list&&dataInfo.service_refound_policy_list.length!==0">
						<view class="product-section el-flex service-policy" @click="isShowPop=!isShowPop">
							<view class="">
								<view class=" service-policy-item el-flex">
									<view class="pro-img el-flex" :key="index"
										v-for="(item,index) in dataInfo.service_refound_policy_list.list_new">
										<template v-if="item.is_page_show">
											<image src="../../static/images/gou.png" mode=""></image>
											<text>{{item.title}}</text>
										</template>
									</view>

								</view>
							</view>

							<view class="">
								>
							</view>
						</view>
					</template>
				</view>
				<view class="blank_line "></view>

				<template v-if="packageList.length!==0">
					<infoPackage :packageList='packageList' :product_info='product_info' :buy_option='buy_option' :dataInfo='dataInfo'></infoPackage>
				</template>
				<template
					v-if="commentData&&Object.keys(commentData).length!==0&&commentData.list&&commentData.list.length!==0">
					<view id='comment'>
						<comments :commentData='commentData' :commodity_id='commodity_id'></comments>
					</view>
				</template>
				<template
					v-if="product_info_content.items&&Object.keys(product_info_content).length!==0&&product_info_content.items.length!==0">
					<remark :product_info_content='product_info_content'></remark>
				</template>
				<template v-if="product_info_wheel_ad.length!==0">
					<view class="section section-detail">
						<view class="product_info_comment wheel_ad">
							<u-swiper :list="product_info_wheel_ad" keyName='img_url' circular interval='5000'>

							</u-swiper>
						</view>
					</view>
				</template>
				<template>
					<infoRank :product_id='product_id' :hot_parts='hot_parts'></infoRank>
				</template>
				<template v-if="product_info_tab.length!==0">
					<view id="infoTab">
						<infoTab :product_info_tab='product_info_tab'></infoTab>
					</view>
				</template>
				<template>
					<infoRem :product_id='product_id'></infoRem>
				</template>

				<u-popup :show="isShow" mode="bottom" @close="closePopup" closeable closeOnClickOverlay>
					<view class="pop-product">
						<u-sticky bgColor="#fff">
							<view class="pro-info el-flex">
								<view class="product-img el-flex">
									<image :src="dataInfo.img_url" mode=""></image>
								</view>
								<view class="product-desc">
									<view class="product-price el-flex">
										<view class="price cur-price">
											¥{{dataInfo.price}}
										</view>
										<view class="price origin-price">
											¥{{dataInfo.market_price}}
										</view>
									</view>
									<view class="name text-ellipsis">
										<text class="version-name text-ellipsis">
											<text>{{dataInfo.name}}</text>
										</text>
									</view>
								</view>
							</view>

						</u-sticky>
						<view class="max5">
							<view v-if="goods_info.length!=0">
								<GoodsSku @getSelect='getSelectItem' :buy_option='buy_option' :goodsData='goods_info'
									:skuId="dataInfo.goods_id" />
							</view>
							<template v-if="batch_info&&batch_info.length!==0">
								<view class="batch-detail">
									<view class="batch-tit">
										套装明细
									</view>
									<block v-for="(batch,batchIndex) in batch_info" :key="batchIndex">
										<view class="batch-group">
											<view class="batch-product el-flex">
												<view class="batch-img">
													<image :src="batch.goods_info[0].img_url" mode=""></image>
												</view>
												<view class="batch-name">
													{{batch.goods_info[0].name}}
												</view>
											</view>
										</view>
									</block>

								</view>
							</template>
							<view class="layout mt2x el-flex">
								<view class="option-title">
									购买数量
								</view>
								<u-number-box v-model="goodNumber" @change="valChange"></u-number-box>
							</view>
							<template v-if="multi_service_bargins&&multi_service_bargins.length!==0">
								<view class="mt2x">
									<view class="option-title">
										小米服务
									</view>
									<view v-for="(serve,serveIndex) in multi_service_bargins" :key="serveIndex"
										style="padding-bottom: .2rem;">
										<view class="serve-title el-flex">
											<view class="serve-left el-flex">
												<image src="../../static/images/icon-accident.png" mode=""
													v-if="serve.service_type_name=='service_insurance'"></image>
												<image src="../../static/images/icon-extend.png" mode=""
													v-if="serve.service_type_name=='service_prolong'"></image>
												<image src="../../static/images/icon-cloud.png" mode=""
													v-if="serve.service_type_name=='service_micloud'"></image>
												<image src="../../static/images/icon-hedge.png"
													v-if="serve.service_type_name=='service_maintain_value'" mode="">
												</image>
												<text>{{serve.type_name}}</text>
											</view>
											<view class="serve-right el-flex">
												<image src="../../static/images/tan.png" mode=""></image>
												<text>服务介绍</text>
											</view>
										</view>
										<view class="serve-group el-flex">
											<view class="serve-item"
												v-for="(serveChild,childIndex) in serve.service_info"
												:ref='`serveItem${serveIndex}`' :data-index='childIndex'
												:class="activeIdList.indexOf(serveChild.service_goods_id)!=-1?'serve-option-act':''"
												@click="getServeItem(childIndex,serveChild,serveIndex,serve.service_type_name)"
												:key="childIndex">
												<view class="addition-tips" v-if="serveChild.act_diff">
													{{serveChild.act_diff}}
												</view>
												<text>{{serveChild.service_short_name}}</text><text>{{serveChild.service_price}}元</text>
											</view>

										</view>
									</view>
								</view>
							</template>
							<template v-if="isCart">
								<view class="cart-bottom">
									<view class="action-box el-flex">
										<view class="buy-btn-group">
											<view class="btn buy-btn yellow" @click="addCart">
												加入购物车
											</view>
											<view class="btn buy-btn orange" @click="addBuy">
												立即购买
											</view>
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="btn-cart-bottom">
									<view class="action-cart-box el-flex">
										<view class="buy-cart-btn" @click="addCart" v-if="!isBuy">
											确定
										</view>
										<view class="buy-cart-btn" @click="addBuy" v-else>
											确定
										</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</u-popup>
				<u-popup :show="isShowPop" mode="bottom" @close="closePopupSecond" closeable closeOnClickOverlay>
					<view class="pop-product">
						<u-sticky bgColor="#fff">
							<view class="h1 fz-m">
								服务说明
							</view>
						</u-sticky>
						<view class="max5 max4" style="padding-bottom: .5rem;">
							<template v-if="dataInfo.service_refound_policy_list">
								<view class="service-item layout"
									v-for="(item,index) in dataInfo.service_refound_policy_list.list_new">
									<view class="pro-img el-flex">
										<image src="../../static/images/active_gou.png" mode=""></image>
										<view class="service-info">
											<view class="title">{{item.title}}</view>
											<view class="info">{{item.desc}}</view>
										</view>
									</view>

								</view>
							</template>

						</view>
						<view class="btn-bottom" @click='isShowPop=!isShowPop'>
							<view class="action-box flex">
								<view class="btn buy-btn">
									确定
								</view>
							</view>
						</view>
					</view>
				</u-popup>
				<u-popup :show="isShowPopPlus" mode="bottom" @close="isShowPopPlus=false" closeable closeOnClickOverlay>
					<view class="pop-product">
						<view class="h1 fz-m">
							关键参数
						</view>
						<view class="max5 max4">
							<block v-for="(item,index) in parameterList" :key="index">
								<view class="parameters-table-row el-flex">
									<text class="parameters-table-name">{{item.name}}型号</text>
									<text class="parameters-table-value">{{item.value}}</text>
								</view>
							</block>

						</view>
						<view class="btn-bottom" @click='isShowPopPlus=!isShowPopPlus'>
							<view class="action-box flex">
								<view class="btn buy-btn">
									确定
								</view>
							</view>
						</view>
					</view>
				</u-popup>
				<u-popup :show="isShowPopAddress" mode="bottom" @close="isShowPopAddress=false" closeable
					closeOnClickOverlay>
					<view class="pop-product">
						<view class="h1 fz-m">
							收货地址
						</view>
						<view class="max5 max4">
							<view class="empty  gray">
								还没有收货地址哦~
							</view>
						</view>
						<view class="btn-bottom" @click='toAddressSearch'>
							<view class="action-box flex">
								<view class="btn buy-btn">
									选择新地址
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</template>
		</view>
		<BottomItem @openCart='openCart' :total="cartTotal"></BottomItem>
	</view>
</template>

<script>
	import GoodsSku from '../../components/goods/goods.vue'
	import comments from '../../components/comments/comments.vue'
	import remark from '../../components/remark/remark.vue'
	import infoRank from '../../components/product_info_rank/product_info_rank.vue'
	import infoTab from '../../components/product_info_tab/product_info_tab.vue'
	import infoRem from '../../components/product_info_recommend/product_info_recommend.vue'
	import BottomItem from '../../components/BottomItem/BottomItem.vue'
	import infoPackage from '../../components/product_info_package/product_info_package.vue'
	import showModal from '../../common/js/showModal.js'
	export default {
		components: {
			GoodsSku,
			comments,
			remark,
			infoRank,
			infoTab,
			infoRem,
			BottomItem,
			infoPackage,
		},
		options: {
			styleIsolation: 'shared'
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
			if (res.scrollTop >= 200) {
				this.leftImg = 'icon-back2-black'
				this.rightImg = 'icon-share-black'
				this.opacity = 1
				this.showZw = true
			} else {
				this.showZw = false
				this.leftImg = 'icon-back2-white'
				this.rightImg = 'icon-share-white'
				this.opacity = res.scrollTop / 200
			}
		},
		data() {
			return {
				isBuy: false,
				isCart: false,
				selectedArr: [],
				cartTotal: 0,
				showZw: false,
				showTop: false,
				goodTabIndex: 0,
				scrollTop: 0,
				leftImg: 'icon-back2-white',
				rightImg: 'icon-share-white',
				opacity: 0,
				isShowPopAddress: false,
				isShowPopPlus: false,
				goodNumber: 1,
				isShowPop: false,
				isShow: false,
				currentNum: 0,
				goods_info: [],
				product_info: {},
				buy_option: [],
				versionList: [],
				activeIdList: [],
				dataInfo: {},
				batch_info: [],
				product_id: '',
				goods_id: '',
				selectGoodId: '',
				textDesc: '',
				commodity_id: '',
				packageList: [],
				commentData: {},
				product_info_content: {},
				product_info_wheel_ad: [],
				hot_parts: {},
				product_info_tab: [],
				goodTabList: [{
					name: '商品',
					className: 'good'
				}, {
					name: '评价',
					className: 'comment'
				}, {
					name: '详情',
					className: 'infoTab'
				}, {
					name: '推荐',
					className: 'rem'
				}, ]
			};
		},
		watch: {
			localData: {
				handler(newVal) {
					this.get_Delivery(this.goods_id, newVal.province_id, newVal.city_id, newVal.district_id, newVal
						.area_id)
				}
			},
			goodTabIndex: {
				handler(newVal) {
					this.switchTab(this.goodTabList[newVal].className)
				}
			},
			scrollTop: {
				handler(newVal) {
					if (newVal >= 700) {
						this.showTop = true
					} else {
						this.showTop = false
					}
				},
				immediate: true
			}
		},
		computed: {
			localData() {
				return this.$store.state.localData
			},
			multi_service_bargins() {
				return this.goods_info[0] && this.goods_info[0].multi_service_bargins ? this.goods_info[0]
					.multi_service_bargins.first : []
			},
			swiperList() {
				let list = []
				this.dataInfo.gallery_v3 && this.dataInfo.gallery_v3.forEach(item => {
					list.push(item.img_url)
				})
				return list
			},
			parameterList() {
				return this.dataInfo.class_parameters && this.dataInfo.class_parameters.list
			},
		},
		methods: {
			addCart() {
				if (Object.keys(this.dataInfo) === 0) {
					return;
				}
				let item = this.dataInfo
				let obj = {
					goodCount: this.goodNumber,
					data: {
						name: item.name,
						commodity_id: item.commodity_id,
						goods_id: item.goods_id,
						img_url: item.img_url,
						market_price: item.market_price,
						multi_service_bargins: item.multi_service_bargins,
						price: item.price,
						product_id: item.product_id,
						page_id: item.page_id,
						prop_list: item.prop_list,
						reduce_price: item.reduce_price,
						buy_option: this.buy_option,
						product_info: this.product_info.product_desc_ext,
						packageList: this.packageList,
						original_name: this.product_info.name,
						selectedArr: this.selectedArr
					}
				}
				this.addCartData(obj)
			},
			addBuy() {
				let item = this.dataInfo
				let obj = {
					name: item.name,
					img_url: item.img_url,
					price: item.price,
					count: this.goodNumber,
					goods_id: item.goods_id,
					market_price: item.market_price,
					serveArr: this.versionList,
					packageList: []
				}
				let selectList = [obj]
				this.addPayData(selectList)
			},
			addPayData(items) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/addPayData',
					method: 'POST',
					data: {
						items: items,
					},
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.isShow = false
							uni.navigateTo({
								url: '/subPage/checkout/checkout',
							})
						} else if (res.data.code == 401) {
							self.isShow = false
							uni.showModal({
								title: "温馨提示",
								content: '请先登录',
								confirmText: "确定",
								confirmColor: "#815EC9",
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/login-view/login-view'
										})
									}
								}
							});
						}
					},
					fail: function(err) {

					}
				})
			},
			openCart(falg) {
				this.isBuy = falg
				this.isCart = false
				this.isShow = true
			},
			getCartTotal() {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/getCartTotal',
					method: 'GET',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.cartTotal = res.data.data.total
						} else {
							self.cartTotal = 0
						}
					},
					fail: function(err) {

					}
				})
			},
			addCartData(item_data) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/addCartData',
					data: {
						item_data: item_data
					},
					method: 'POST',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							uni.showToast({
								title: '已加入购物车',
								icon: 'success',
								success() {
									self.isShow = false
									self.getCartTotal()
								}
							})
						} else if (res.data.code == 401) {
							self.isShow = false
							uni.showModal({
								title: "温馨提示",
								content: '请先登录',
								confirmText: "确定",
								confirmColor: "#815EC9",
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/login-view/login-view'
										})
									}
								}
							});
						}
					},
					fail: function(err) {

					}
				})
			},
			previewImage(index, photoList) {
				uni.previewImage({
					current: index,
					urls: photoList,
					loop: true,
					indicator: 'number'
				})
			},
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			changeGoodTab(index) {
				this.goodTabIndex = index
			},
			switchTab(name) {
				if (name == 'rem' || name == 'good') return
				this.$nextTick(() => {
					setTimeout(() => {
						uni.createSelectorQuery().in(this).select(`#${name}`).boundingClientRect(res => {
							// if (res.top) {
							// 	uni.pageScrollTo({
							// 		duration: 0,
							// 		scrollTop: res.top,
							// 	})
							// }
						}).exec();
					}, 100);
				});
			},
			Back() {
				uni.navigateBack(-1)
			},
			get_Delivery(product_id, province_id, city_id, district_id, area_id) {
				this.$request.get('/getDelivery', {
					'product_id': product_id,
					'province_id': province_id,
					'city_id': city_id,
					'district_id': district_id,
					'area_id': area_id
				}).then((res) => {
					let obj = res.data.data.datas
					Object.keys(obj).forEach(key => {
						if (key == this.selectGoodId) {
							this.textDesc = obj[key].est_delivery_desc
						}
					})
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			toAddressSearch() {
				uni.navigateTo({
					url: `/subPage/AddressSearch/AddressSearch?product_id=${this.product_id}`,
				})
				this.isShowPopAddress = false
			},
			getSelectItem(obj) {
				let id = obj.id
				this.selectedArr = obj.selectedArr
				const data = this.goods_info.find(item => {
					if (item.goods_id == id) return item
				})
				this.dataInfo = data
				this.selectGoodId = data.goods_id
				this.commodity_id = data.commodity_id
			},
			getServeItem(childIndex, item, parentId, service_type_name) {
				let obj = {
					number: parentId,
					name: item.service_name,
					service_short_name: item.service_short_name,
					id: item.service_goods_id,
					price: item.service_price,
					count: 1,
					market_price: item.service_price,
					service_type_name: service_type_name
				}
				if (this.versionList.length == 0) {
					this.versionList.push(obj)
					this.activeIdList.push(item.service_goods_id)
					return
				} else {
					let actIndex = this.activeIdList.indexOf(item.service_goods_id)
					if (actIndex != -1) {
						this.versionList.splice(actIndex, 1);
						this.activeIdList.splice(actIndex, 1);
						return
					}
					for (var i = 0; i < this.versionList.length; i++) {
						if (this.versionList[i].number == parentId) {
							this.versionList.splice(i, 1);
							this.activeIdList.splice(i, 1);
						}
					}
					this.versionList.push(obj)
					this.activeIdList.push(item.service_goods_id)
				}
			},

			valChange() {

			},
			closePopup() {
				this.isShow = false
			},
			closePopupSecond() {
				this.isShowPop = false
			},
			changeSwiperItem(e) {
				this.currentNum = e.current
			},
			clickSwiperItem(index) {
				this.previewImage(index, this.swiperList)
			},
			getminProduct(commodity_ids, goods_id, province_id, city_id, district_id, area_id) {
				this.$request.get('/getminProduct', {
					'commodity_ids': commodity_ids,
					'goods_id': goods_id,
					'province_id': province_id,
					'city_id': city_id,
					'district_id': district_id,
					'area_id': area_id
				}).then((res) => {
					let obj = res.data.data.barginAct
					Object.keys(obj).forEach(key => {
						if (key == this.selectGoodId) {
							if (obj[key].first.bargain_acts) {
								this.packageList = obj[key].first.bargain_acts
							}
						}
					})
					this.packageList.forEach((item, index) => {
						this.$set(this.packageList[index], 'isSelect', true)
					})
				}).catch(e => {
					console.log('错误了:', e)
				})
			},

			fetchData(id) {
				this.$request.get('/getInfoData', {
					id: id
				}).then((res) => {
					let buy_option = []
					this.product_info = res.data.data.product_info
					this.goods_info = res.data.data.goods_info
					this.selectGoodId = res.data.data.default_goods_id
					this.commodity_id = this.goods_info[0].commodity_id
					this.batch_info = res.data.data.batch_info
					this.commentData = res.data.data.goods_share_datas.comments
					this.hot_parts = res.data.data.hot_parts
					let goods_tpl_datas = Object.values(res.data.data.goods_tpl_datas)[0].sections
					goods_tpl_datas.forEach(item => {
						if (item.view_type == 'product_info_content') {
							this.product_info_content = item.body
						} else if (item.view_type == 'product_info_wheel_ad') {
							this.product_info_wheel_ad = item.body.items
						} else if (item.view_type == 'product_info_tab') {
							this.product_info_tab = item.body.items
						}
					})
					let commodityList = []
					let default_prop_list = []
					this.goods_info.forEach((item, index) => {
						if (item.goods_id == this.selectGoodId) {
							this.dataInfo = this.goods_info[index]
							default_prop_list = this.goods_info[index].prop_list
						}
						commodityList.push(item.commodity_id)
						if (index == this.goods_info.length - 1) {
							this.goods_id += item.goods_id
						} else {
							this.goods_id += item.goods_id + ','
						}
					})
					buy_option = res.data.data.buy_option
					buy_option.forEach((item, index) => {
						default_prop_list.forEach((i, j) => {
							if (buy_option[index].prop_cfg_id == default_prop_list[j]
								.prop_cfg_id) {
								buy_option[index].list.forEach((a, b) => {
									if (a.prop_value_id == default_prop_list[j]
										.prop_value_id) {
										a.selected = true
									} else {
										a.selected = false
									}
								})
							} else {
								buy_option[index].list.forEach((a, b) => {
									a.selected = false
								})
							}
						})
					})
					this.buy_option = buy_option
					commodityList = [...new Set(commodityList)]
					this.commodityList = commodityList.join(',')
					this.get_Delivery(this.goods_id, this.localData.province_id, this.localData.city_id, this
						.localData.district_id, this.localData.area_id)
					this.getminProduct(this.commodityList, this.goods_id, this.localData.province_id, this
						.localData.city_id, this
						.localData.district_id, this.localData.area_id)
				}).catch(e => {
					console.log('错误了:', e)
					uni.navigateTo({
						url: `/subPage/emptyData/emptyData`
					})
				})

			},

		},
		onShow() {
			this.getCartTotal()
		},
		onLoad(e) {
			this.fetchData(e.id)
			this.product_id = e.id
		}
	}
</script>

<style lang="scss" scoped>
	.header-comp {
		position: relative;
		max-width: 720px !important;
		min-width: 350px !important;
		margin: 0 auto;
		z-index: 999;

		.header {
			position: fixed;
			top: 0;
			width: 7.2rem;
			z-index: 99;
		}

		.zw {
			height: var(--status-bar-height);
		}

		.status-bar {
			position: sticky;
			top: 0;
			background-color: white;
			z-index: 1;
			width: 7.2rem;
		}

		.header-bar {
			position: relative;
		}
	}

	.header {
		max-width: 720px !important;
		min-width: 350px !important;
		margin: 0 auto;
		height: 0.9rem;
		background: transparent;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		line-height: 1.15;



		view {
			line-height: 1.15;
		}

		.fill-height {
			height: 100%;
			display: flex;
			align-items: center;
			flex: 1 1 auto;
			flex-wrap: nowrap;

			.header-btn2 {
				background: none;
				border-radius: 0;
				display: block;
				margin: 0 0.2rem;
				color: #ddd;

				image {
					width: 0.806rem;
					height: 0.806rem;
				}
			}

			.share-btn {
				image {
					width: 0.8rem;
					height: 0.8rem;
				}
			}

			.placeholder {
				flex: 1;
				text-align: center;

				text {
					margin: 0 0.16rem;
					font-size: .253rem;
					padding-bottom: 0.115rem;
					position: relative;
				}

				.active {
					color: #ff5934;
					font-weight: 700;
					font-size: .253rem;

					&:after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 50%;
						width: 0.26rem;
						height: 0.05rem;
						margin-left: -0.13rem;
						background-color: #ff5934;
						border-radius: 0.05rem;
						overflow: hidden;
					}
				}
			}
		}
	}

	hr {
		border: none;
		border-top: 0.019rem solid rgba(0, 0, 0, .1);

	}

	.blank_line {
		height: 0.2rem;
		background: rgb(246, 246, 246);
		margin-top: -0.019rem;
		width: 100%;
		transform: translateZ(0);
	}

	/deep/.u-sticky {
		top: 0 !important;
	}

	/deep/.u-popup__content__close {
		z-index: 999;
	}

	.home-page {
		padding-bottom: 1.2rem;
	}

	.overview-goods-brief {
		margin-top: 0.12rem;
		margin-bottom: 0.12rem;
		line-height: 1.5em;
		word-break: break-all;
		color: rgba(0, 0, 0, .54);
		overflow: hidden;
		text-overflow: ellipsis;
		display: box;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #000;
		font-size: .24rem;
	}

	.now-wrap {
		justify-content: flex-start;
	}

	/deep/.u-scroll-list__indicator {
		display: none;
	}

	/deep/.u-swiper,
	/deep/.u-swiper__wrapper,
	/deep/.u-swiper__wrapper__item__wrapper__image {
		background: #ccc;
		width: 100%;
		height: 7.92rem !important;

		image {
			height: 100%;
		}
	}

	/deep/.u-swiper__indicator {
		bottom: 0.32rem;
		right: 0.32rem;
	}

	.indicator-num {
		padding: 0.038rem 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 2rem;
		width: 0.85rem;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: .2rem;
		}
	}

	.goods-info {
		padding: .2rem .3rem;

		.goods-price {
			justify-content: flex-start;

			.cur-price {
				color: #ff6700;
				font-size: .48rem;
				font-family: Avenir, Arial, sans-serif;
				font-weight: 700;
			}

			.cur-fu {
				font-size: .25rem;
				margin-right: .08rem;
			}

			.origin-fu {
				font-size: .28rem;
				margin-right: .06rem;
			}

			.origin-price {
				margin-left: 0.16rem;
				color: rgba(0, 0, 0, .54);
				font-size: .24rem;
				text-decoration: line-through;
			}

			.price {}
		}

		.coupon-cc {
			padding-bottom: .15rem;

			.coupon-active {
				background-color: #fff2ef;
				font-size: .25rem;
				position: relative;
				overflow: hidden;
				justify-content: space-between;
				padding: .15rem;

				.overview-promotion-left {
					display: inline-flex;
					color: #ff6900;
					font-size: .2rem;
					border: 0.019rem solid #ff6900;
					margin-left: 0.1rem;
					padding: 0 0.05rem;
					align-items: center;
					border-radius: 0.04rem;
					height: .33rem;
				}

				.coupon-btn {
					display: inline-flex;
					font-size: .2rem;
					border-radius: 0.06rem;
					padding: 0 0.14rem;
					background: #ff6900;
					color: #fff;
				}
			}

		}

		.section-detail {

			.product_info_product_desc {

				.overview-sell-point {
					.sell_point_desc {
						justify-content: flex-start;

						.number {
							width: 0.24rem;
							height: 0.24rem;
							margin-right: 0.1rem;

						}

						text {
							font-size: .24rem;
						}
					}
				}
			}

			.overview-flow-distribution {
				margin-top: 0.28rem;
				max-width: 80%;
				margin-bottom: 0.28rem;
				display: inline-block;
				color: #444;
				padding: 0 0.3rem 0 0.12rem;
				background-color: #f0f0f0;
				border-radius: .2rem;
				position: relative;
				font-size: .24rem;
			}

		}

		.overview-goods-name {
			line-height: 1.5em;
			color: #000;
			padding: 0.15rem 0;
			font-weight: 700;
			font-size: .32rem;
			font-family: Avenir;
		}
	}

	.section-detail {

		.wheel_ad {
			padding: 0 .28rem;
			height: 2.22rem;
			background-color: #f6f6f6;

			/deep/.u-swiper {
				position: relative;
				width: 100%;
				height: 2.22rem !important;

				margin: 0 auto;
				background-color: #f6f6f6;
			}

			/deep/.uni-swiper-slide-frame {}

			/deep/.u-swiper__wrapper,
			/deep/.uni-swiper-slide-frame,
			/deep/.uni-swiper-wrapper {
				height: 2.22rem !important;
				background-color: #f6f6f6;
				display: flex;
				align-items: center;
			}


			/deep/.u-swiper__wrapper__item__wrapper,
			/deep/.u-swiper__wrapper__item {
				width: 100%;
				height: 1.82rem !important;
			}

			/deep/uni-swiper-item {
				align-items: center !important;
				justify-content: center;
			}

			/deep/.u-swiper__wrapper__item__wrapper__image {
				display: block;
				width: 6.56rem !important;
				height: 1.82rem !important;

				border-radius: 0.16rem !important;
			}
		}

		.product_info_class_parameters {

			.good-info-item {
				padding: 0 .06rem;
				width: 1.7rem;
				min-width: 1.68rem;
				text-align: center;

				view {
					line-height: 1.4;
				}

				.item-name {
					font-size: .24rem;
				}

				.icon-img {
					margin-bottom: -.06rem;
					width: 0.3rem;
					height: 0.3rem;
				}

				.info-item {
					font-size: .2rem;
				}

			}
		}


		.product_info_choose_version {
			padding: .16rem .29rem .18rem .29rem;
			align-items: baseline;
			justify-content: space-between;

			.choose_version_left {
				margin-right: .38rem;
				font-weight: 500;
				font-size: .25rem;
				min-width: .54rem;
			}

			.choose_version-right {
				flex: 1;
				flex-wrap: wrap;
				justify-content: space-between;

				.version {
					.version-name {
						max-width: 5rem;
						display: inline-block;
						font-size: .25rem;
						color: #000;
						font-family: Arial, Avenir, sans-serif;

						text {
							font-weight: 500;
							margin-right: .06rem;
						}
					}

					.version-num {
						font-size: .25rem;
					}
				}
			}
		}

		.service-policy {
			justify-content: space-between;
		}

		.product-section {
			padding: .2rem .29rem;

			.product_left {
				margin-right: 0.38rem;
				font-weight: 500;
				font-size: .25rem;
				min-width: 0.54rem;
			}

			.product-right {
				flex: 1;

				.version {
					.location {
						justify-content: space-between;

						.location-name {
							margin-right: 0.08rem;
						}

						.text-act {
							flex-shrink: 0;
							color: #ff5934;

						}

						image {
							width: 0.32rem;
							height: 0.32rem;
							margin-right: 0.06rem;
						}
					}

					.location-info {
						padding: 0 .38rem;
						color: rgba(0, 0, 0, .54);
						font-size: .23rem;
					}
				}
			}

			.service-policy-item {
				justify-content: flex-start;
				flex-wrap: wrap;

				.pro-img {
					font-size: .24rem;
					line-height: .4rem;
					margin-right: 0.32rem;

					image {
						width: .25rem;
						height: .25rem;
						margin-right: 0.08rem;
					}

					text {
						font-size: .2rem;
						color: rgba(0, 0, 0, .54);
					}
				}
			}
		}
	}


	.pop-product {
		padding: 0 0.32rem 0.8rem 0.32rem;
		height: 9.92rem;
		overflow-y: scroll;
		max-height: 9.92rem;
		box-sizing: border-box;

		.h1 {
			color: rgba(0, 0, 0, .87);
			text-align: center;
			padding: 0.32rem 0 0.44rem;
		}

		.pro-info {
			padding: 0.32rem 0 0.2rem;
			justify-content: space-between;

			.product-img {
				width: 1.68rem;
				min-width: 1.68rem;
				height: 1.68rem;
				text-align: center;
				overflow: hidden;
				border-radius: 0.08rem;
				background: rgba(0, 0, 0, .04);

				image {
					width: 1.44rem;
					height: 1.44rem;
				}
			}

			.product-desc {
				width: 4.5rem;
				height: 1.67rem;
				margin: 0 0 0 0.32rem;

				.product-price {
					justify-content: flex-start;
					margin-top: 0.2rem;

					.cur-price {
						color: #ff6700;
						font-size: .36rem;
						font-weight: 900;
						font-family: Avenir, Arial, sans-serif;
						margin-right: .1rem;
					}

					.origin-price {
						color: rgba(0, 0, 0, .54);
						font-size: .2rem;
						line-height: 1em;
						margin-bottom: -.1rem;
						text-decoration: line-through;
					}
				}

				.name {
					font-size: .2rem;
					height: 0.64rem;
					line-height: .32rem;
					margin-top: 0.2rem;

					.version-name {
						text {
							margin-right: .06rem;
						}
					}
				}
			}
		}

		.max5 {
			padding: .2rem 0;

			&:last-child {
				padding-bottom: 0;
			}

			.batch-detail {
				position: relative;
				background: rgba(0, 0, 0, .04);
				border-radius: 0.08rem;
				padding: 0.22rem 0.16rem 0.16rem;
				margin-bottom: 0.25rem;

				.batch-tit {
					font-weight: 700;
					color: #000;
					line-height: .24rem;
					font-size: .24rem;
					padding-bottom: 0.09rem;
				}

				.batch-group {
					.batch-product {
						padding: 0.16rem 0 0;
						justify-content: flex-start;

						.batch-img {
							width: 1.34rem;
							height: 1.34rem;
							box-sizing: border-box;
							text-align: center;

							image {
								width: 1.34rem;
								height: 1.34rem;
								margin: 0 auto;
								border-radius: 0.08rem;
							}
						}

						.batch-name {
							line-height: 1.15;
							font-size: .22rem;
							margin-left: 0.24rem;
						}
					}
				}
			}

			.mt2x {
				padding-bottom: .2rem;

				.option-title {
					display: flex;
					position: relative;
					margin-bottom: .2rem;
					font-size: .24rem;
					color: #000;
					font-weight: 700;
				}

				.options-group {
					justify-content: flex-start;
					flex-wrap: wrap;



					.option-item {
						font-size: .2rem;
						line-height: .24rem;
						min-width: 0.64rem;
						box-sizing: border-box;
						height: 0.54rem;
						padding: 0.14rem 0.2rem;
						text-align: center;
						margin: 0 0.24rem 0.24rem 0;
						overflow: visible;
						border-radius: 0.28rem;
						border: 0.02rem solid transparent;
						background: rgba(0, 0, 0, .04);

					}

					.option-act {
						color: #f56600;
						border: 0.02rem solid #ff5934;
						border-radius: 0.28rem;
						background: rgba(255, 89, 52, .08);
					}
				}
			}

			.layout {
				justify-content: space-between;

				.option-title {
					margin-bottom: 0;
				}
			}

			.sold-btn {
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: #fff;

				.action-box {
					height: .90rem;
					padding: 0.12rem 0.31rem;

					.buy-btn-group {
						display: flex;
						height: 0.72rem;
						border-radius: 0.72rem;
						overflow: hidden;

						.buy-btn {
							height: 0.72rem;
							background: url('../../static/images/icon-buy-tc.png');
							line-height: .72rem;
							background-size: 100% 100%;
							color: #fff;
							display: block;
							text-align: center;
							width: 100%;
							border-radius: 0;
							font-size: .28rem;
							line-height: .72rem !important;


						}

						.orange {
							background-image: linear-gradient(90deg, #ff7310, #fe3f00) !important;
						}

						.yellow {
							background-image: linear-gradient(90deg, #fdcf00, #fd9b00) !important;
						}
					}
				}
			}

			.pro-img {

				align-items: baseline;

				image {
					margin-top: .06rem;
					width: 0.24rem;
					height: 0.24rem;
					margin-right: .17rem;
				}

			}

			.service-info {
				flex: 1;

				.title {
					font-size: .25rem;
				}

				.info {
					color: rgba(0, 0, 0, .5);
					font-size: .23rem;
				}
			}

			.parameters-table-row {
				margin: 0.48rem 0;

				.parameters-table-name {
					color: #919191;
					width: 3.04rem;
					margin-right: 0.16rem;
					word-break: keep-all;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: .28rem;
				}

				.parameters-table-value {
					width: 100%;
					flex: 1 1 auto;
					word-break: keep-all;
					overflow: hidden;
					font-size: .28rem;
					text-overflow: ellipsis;
				}
			}

			.serve-title {

				justify-content: space-between;

				.serve-left {
					image {
						width: 0.24rem;
						height: 0.24rem;
						margin-top: -.02rem;
						margin-right: 0.08rem;
						position: relative;
					}

					text {
						line-height: .24rem;
						font-size: .24rem;
						color: #000;
					}
				}


				.serve-right {
					image {
						width: 0.24rem;
						height: 0.23rem;
						margin-right: 0.08rem;
					}

					text {
						color: rgba(0, 0, 0, .3);
						font-size: .2rem;
						font-weight: 400;
					}
				}
			}

			.serve-group {
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: .16rem;



				.serve-item {
					position: relative;
					line-height: .24rem;
					min-width: 0.64rem;
					box-sizing: border-box;
					padding: 0.15rem 0.24rem;
					text-align: center;
					margin: 0 0.24rem 0.24rem 0;
					overflow: visible;
					border-radius: 0.28rem;
					border: 0.02rem solid transparent;
					background: rgba(0, 0, 0, .04);

					text {
						font-size: .22rem;
					}
				}

				.serve-option-act {
					color: #f56600;
					border: 0.02rem solid #ff5934;
					background: rgba(255, 89, 52, .08);
				}
			}


		}

		.fz-m {
			text-align: center;
			font-size: .35rem;
		}

		.max4 {
			overflow-y: scroll;
			max-height: 100%;
			padding-bottom: .1rem;

			.empty {
				padding: 0.32rem 0;
				text-align: center;
			}

			.service-item {
				margin-bottom: .2rem;
			}


		}

		.btn-cart-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;

			.action-cart-box {
				height: 1.04rem;
				padding: 0.12rem 0.31rem;

				.buy-cart-btn {
					height: 0.72rem;
					line-height: .72rem;
					background: url(../../static/images/icon-buy-tc.png) no-repeat;
					background-size: 100% 100%;
					border-radius: 0.4rem;
					color: #fff;
					display: block;
					text-align: center;
					width: 100%;
					font-size: .28rem;
				}
			}
		}

		.cart-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;

			.action-box {
				height: 1.04rem;
				padding: 0.12rem 0.31rem;

				.buy-btn-group {
					display: flex;
					height: 0.72rem;
					border-radius: 0.72rem;
					overflow: hidden;

					.buy-btn {
						text-align: center;
						display: inline-block;
						width: 3.68rem;
						height: 0.72rem;
						line-height: .72rem;
						font-family: MI-LANTING--GBK1-Bold, MI-LANTING--GBK1;
						background: url(../../static/images/icon-buy-tc.png);
						background-size: 100% 100%;
						flex: 1;
						border-radius: 0;
						font-size: .28rem;
						color: #fff;
					}

					.yellow {
						background-image: linear-gradient(90deg, #fdcf00, #fd9b00) !important;
					}

					.orange {
						background-image: linear-gradient(90deg, #ff7310, #fe3f00) !important;
					}
				}
			}
		}

		.btn-bottom {
			position: fixed;
			bottom: 0;
			left: 50%;
			right: 50%;
			transform: translate(-50%);
			width: 100%;
			padding-bottom: .2rem;
			background: #fff;

			.action-box {
				padding: 0.12rem 0.31rem;

				.buy-btn {
					height: 0.72rem;
					line-height: .72rem;
					background: url(../../static/images/icon-buy-tc.png) no-repeat;
					background-size: 100% 100%;
					border-radius: 0.4rem;
					color: #fff;
					display: block;
					text-align: center;
					width: 100%;
					font-size: .28rem;
				}
			}
		}
	}

	/deep/.u-popup__content {
		border-top-left-radius: 0.24rem;
		border-top-right-radius: 0.24rem;
	}
</style>